
<template>
  <div>
    <a-carousel
      class="w-full h-[500px]"
      :auto-play="{
        interval: 2000,
        hoverToPause: true,
      }"
      animation-name="fade"
      show-arrow="hover"
    >
      <a-carousel-item v-for="image in images" :key="image">
        <img :src="image" class="w-full h-full object-cover" />
      </a-carousel-item>
    </a-carousel>
    <div class="container mx-auto my-20">
      <div class="flex flex-col items-center justify-center w-[55%] mx-auto gap-4">
        <div class="text-blue-600 text-3xl font-bold">Our Features</div>
        <div class="text-5xl text-center font-bold">Insurance Provide you a Better Future</div>
        <p class="text-stone-400 text-center">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur adipisci facilis
          cupiditate recusandae aperiam temporibus corporis itaque quis facere, numquam, ad culpa
          deserunt sint dolorem autem obcaecati, ipsam mollitia hic.
        </p>
      </div>
    </div>
    <div  ref="main" class="container mx-auto mb-10 grid grid-cols-1 md:grid-cols-3 gap-4 px-4">
      <div
        v-for="(_, index) in Array(8)"
        :key="index"
        class=" bg-white shadow-md rounded-xl overflow-hidden h-[450px] relative hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-2  group box "
       
      >
        <div class="flex items-center h-[244px] overflow-hidden">
          <img
            class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110"
            alt="dessert"
            src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
          />
        </div>
        <div
          class="w-full p-4 flex flex-col h-[206px] justify-between bg-slide bg-gradient-to-r from-sky-500 to-indigo-500"
        >
          <div
            class="overflow-hidden text-black group-hover:text-white font-semibold text-xl font-pingfangsc leading-7 text-justify cursor-pointer tracking-normal break-all text-ellipsis"
            style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
          >
            Card Description
          </div>
          <p
            class="text-[#08001f] text-base font-roboto-regular leading-7 text-justify opacity-40 tracking-normal group-hover:text-white"
          >
            {{ new Date().toLocaleDateString() }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { getBanner } from '@/api';
const images = ref([
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
])
const main = ref();
gsap.registerPlugin(ScrollTrigger);
const ctx=ref();

onMounted(() => {
  getBanner({}).then(res => {
    console.log(res);
  })
  // 创建主时间线，设置默认持续时间和缓动函数
  const t1 = gsap.timeline({
    defaults: {
      duration: 0.8,
      ease: "power3.out" // 使用更平滑的缓动函数
    }
  });

  ctx.value = gsap.context(() => {
    const boxes = gsap.utils.toArray('.box') as HTMLElement[];
    
    // 使用 stagger 为每个元素添加交错效果
    boxes.forEach((box, index) => {
      t1.from(box, {
          y: 60,
          opacity: 0,
          scale: 0.95,
          scrollTrigger: {
            trigger: box,
            start: "top 85%",
            end: "bottom 20%",
            scrub: 0.6,
            markers: false
          }
        }, index * 0.1); // 使用交错延迟创建级联效果
      });
    })
  }, main.value);

onUnmounted(() => {
  ctx.value.revert(); 
});

</script>

<style lang="less" scoped>
.fadeIn {
  animation: fadeInUp 0.8s ease-in-out forwards;
}

@keyframes fadeInUp {
  from {
    transform: translateY(50px);
  }
  to {
    transform: translateY(0);
  }
}

.bg-slide {
  // background-image: linear-gradient(to right, #3b82f6, #3b82f6);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
}

.group:hover .bg-slide {
  background-size: 100% 100%;
  animation: slide 0.5s ease forwards;
}

@keyframes slide {
  0% {
    background-size: 0 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}
</style>
